<template>
  <div  class="container-wrapper" :class="[customClass]">
    <div @click.stop="selectWidget(widget)">
        <div>查询区</div>
        <div>工具栏</div>
        <div class="form-widget-container">
            <el-switch
                    v-model="showTable"
                    size="large"
                    active-text="显示"
                    inactive-text="编辑"
                />
            <div v-if="showTable">
                <el-table :data="tableData" style="width: 100%">
                <el-table-column v-for="item in tableCloumnList" prop="date" :label="item.name" width="180" />
                
                </el-table>
            </div>
            <div v-else>
                <div>表格操作栏</div>
                <div>表格栏试试</div>
                
                <el-row :gutter="20">
                    <el-col :span="12">表单属性</el-col>
                    <el-col :span="12">字段名称</el-col>
                </el-row>
                <draggable 
                    :list="tableCloumnList"
                    ghost-class="ghost"
                    handle=".move"
                    filter=".forbid"
                    :force-fallback="true"
                    chosen-class="chosenClass"
                    animation="300"
                    @start="onStart"
                    @end="onEnd"
                    group="itxst"
                    :fallback-class="true"
                    :fallback-on-body="true"
                    :touch-start-threshold="50"
                    :fallback-tolerance="50"
                    :move="onMove"
                >
                    <template #item="{element }">
                        <div class="item move">
                        <el-row :gutter="20" style="margin: 10px 0">
                            <el-col :span="10">
                                <el-select v-model="value" class="m-2" placeholder="Select" size="large">
                                <el-option
                                    v-for="item in fieldList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                                </el-select>
                            </el-col>
                            <el-col :span="10"><el-input v-model="input" placeholder="Please input" /></el-col>
                            <el-col :span="4">
                                <el-button type="success" circle @click="addCloumn">+</el-button>
                                <el-button type="danger" circle  @click="removeCloume(element)">-</el-button>
                            </el-col>
                        </el-row>
                        </div>
                    </template>
                </draggable>
            </div>
        </div>
    </div>
    <div class="container-action" v-if="true">
        <i title="选中父组件" @click.stop="selectParentWidget(field)">
           <SvgIcon icon-class="el-back" />
        </i>
        <i title="上移组件"
           @click.stop="moveUpWidget(field)"><SvgIcon icon-class="el-move-up" /></i>
        <i  title="下移组件"
           @click.stop="moveDownWidget(field)"><SvgIcon icon-class="el-move-down" /></i>
        <i title="插入行"
         @click.stop="appendTableRow(widget)"><SvgIcon icon-class="el-insert-row" /></i>
        <i title="插入列"
         @click.stop="appendTableCol(widget)"><SvgIcon icon-class="el-insert-column" /></i>
        <i  title="复制组件"
         @click.stop="cloneContainer(widget)"><SvgIcon icon-class="el-clone" /></i>
        <i title="删除组件" @click.stop="removeFieldWidget">
          <SvgIcon icon-class="el-delete" />
        </i>
    </div>

    <div class="drag-handler" v-if="false">
        <i title="拖拽手柄"><SvgIcon icon-class="el-drag-move" /></i>
        <i>{{data.name}}</i>
        <i><SvgIcon icon-class="el-hide" /></i>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, toRefs, watch} from 'vue'
  import draggable from "vuedraggable"
  import SvgIcon from '@/designer/svgIcon'
  import fieldWidget from '../fieldWidget'
  import gridWidget from '../containerWidget/gridWidget.vue'

  const state = reactive({
       tableCloumnList: [
          {id:'1',type: 'button',  icon: 'grid', name:'添加'},
          {id:'1',type: 'button',  icon: 'grid', name:'修改'},
          {id:'1',type: 'button',  icon: 'grid', name:'删除'},
        ]
    });

    const {
      tableCloumnList
    }  = toRefs(state);
    const parentData = defineProps({
        data:{
            type: String,
            name: String
        }
    });

</script>

<style lang="scss" scoped>
     $--color-primary: #409EFF;
  .container-wrapper {
    position: relative;
    margin-bottom: 5px;

    .container-action{
      position: absolute;
      //bottom: -30px;
      bottom: 0;
      right: -2px;
      height: 28px;
      line-height: 28px;
      background: $--color-primary;
      z-index: 999;

      i {
        font-size: 14px;
        color: #fff;
        margin: 0 5px;
        cursor: pointer;
      }
    }

    .drag-handler {
      position: absolute;
      top: -2px;
      //bottom: -24px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
      left: -2px;
      height: 22px;
      line-height: 22px;
      background: $--color-primary;
      z-index: 9;

      i {
        font-size: 14px;
        font-style: normal;
        color: #fff;
        margin: 4px;
        cursor: move;
      }
    }

  }

  .container-action, .drag-handler {
    :deep(.svg-icon) {
      margin-left: 0.1em;
      margin-right: 0.1em;
    }
  }
</style>
